﻿@import "../../LiberUI/Style/Default/_Theme";
@import "../../LiberUI/Style/Default/_soIcons";

@font-face {
  font-family: 'SoIcons';
  src: url('/LiberUI/Style/Default/fonts/iconfont.eot');
  src: url('/LiberUI/Style/Default/fonts/iconfont.eot') format('embedded-opentype'), url('/LiberUI/Style/Default/fonts/iconfont.woff') format('woff'), url('/LiberUI/Style/Default/fonts/iconfont.ttf') format('truetype'), url('/LiberUI/Style/Default/fonts/iconfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.timeline-container{
    max-width: 900px;
    margin: auto;
    .timeline-item{
        padding: 5px;
        padding-left: 110px;
        position: relative;

        &:first-child .left-icon:before{
            display: none;
        }
        &:last-child .left-icon:after{
            display: none;
        }

        > .sendOder .soicon{
            background:#33CCFF;
        }
        > .enterOder .soicon{
            background:#00CCCC;
        }
        > .shipOder .soicon{
            background:#09C;
        }
        > .receiptOder .soicon{
            background:#008000;
        }
        > .updateOder .soicon{
            background:#FF9900;
        }
    }
    .left-icon{
        width: 80px;
        height: 100%;
        text-align: center;
        position: absolute;
        left: 10px;
        top: 0;

        &:after,
        &:before{
            content:'';
            width: 1px;
            height: 50%;
            background:#999;
            position: absolute;
            left: 50%;
            top:0;
        }
        &:after{
            top:auto;
            bottom:0;
        }

        .soicon{
            width: 52px;
            height: 52px;
            font-size: 30px;
            line-height: 52px;
            border: 4px solid #FFF;
            margin: {
                left: -30px;
                top: -30px;
            }
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;

            @include perfix(border-radius, 50%);

            &:before{
                color: #FFF;
            }
        }
    }
    .timeline-panel{
        font-size: 1.2rem;
        line-height: 1.6em;
        background-color: #FFF;
        position: relative;
        padding: 10px;

        @include perfix(border-radius, 8px);
        
        &:before{
            content:'';
            width: 0;
            height: 0;
            border-top: 1rem solid transparent;
            border-right: 1rem solid #FFF;
            border-bottom: 1rem solid transparent;
            margin-top: -1rem;
            position: absolute;
            left: -1rem;
            top: 50%;
        }
        .datetime{
            color: #CCC;
            float: right;
        }
        .text{
            color:#333;
            a{
                color:#4AA6BC;
                text-decoration: underline;
                border: 0;
            }
        }
        .source{
            color: #CCC;
        }
    }
}